<template>
  <div class="msg">
    <div v-for="(item,index) in systemMsg" :key="index" class="bread">
      <div class="system clearfix">
        <h6 class="left">【系统消息】</h6>
        <span class=" time left">{{ item.time }}</span>
        <em class="left">删除</em>
        <i class="right" @click="showCont(index)">
          <img v-show="number !== index" src="../../../../assets/img/template-item2/icons/bianji_bat_xialasanjiao.png" alt="">
          <img v-show="number == index" src="../../../../assets/img/template-item2/icons/bianji_bat_xia.png" alt="">
        </i>
        <br>
        <p class="title">{{ item.title }}</p>
        <span v-show="number == index" class="content">{{ item.content }}</span>
      </div>
      <!-- <div class="msg-title">

      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Msg',
  data() {
    return {
      systemMsg: [
        {
          time: '2019-06-18',
          title: '我是标题1',
          content: '我是内容一'
        },
        {
          time: '2019-06-18',
          title: '我是标题2',
          content: '我是内容2'
        },
        {
          time: '2019-06-18',
          title: '我是标题3',
          content: '我是内容3'
        }
      ],
      number: -1

    }
  },
  methods: {
    showCont(num) {
      if (this.number < num || this.number > num) {
        this.number = num
      } else {
        this.number += 10
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.msg{
  .bread{
    padding: 20px;
    border-bottom: 1px solid #ECECEC;
    .system{
      h6{
        font-size:18px;
        font-weight:bold;
        line-height:24px;
      }
      .time{
        font-size:16px;
        line-height:24px;
        color:#787878;
        margin: 0 12px;
      }
      em{
        font-size:16px;
        font-weight:600;
        line-height:21px;
        color:#787878;
        &:hover{
          color: #DC3535;
        }
      }
      .title{
        font-size:16px;
        font-weight:600;
        line-height:21px;
        margin: 12px 0;
      }
      .content{
        color: #787878;
        font-size: 14px;
        // display: none;
      }
      // &:hover{
      //   >.content{
      //     display: block;
      //   }
      // }
    }

  }

}
</style>
